<template>
  <div class="notificationPanel" v-if="currentNotice">
    <div class="notificationContent" v-loading="loading">
      <div class="notificationDesc ql-editor" v-html="currentNotice.content"></div>
      <div class="turnPageArea" v-if="isShowPage">
        <div class="btn">
          <div class="arrowDesc" v-if="lastNotice" @click="getMessageDetail(lastNotice.message_id)">
            <span class="el-icon-arrow-left"></span>
            <p class="btnText">{{lastNotice.title}}</p>
          </div>
        </div>
        <div class="btn">
          <div class="arrowDesc" v-if="nextNotice" @click="getMessageDetail(nextNotice.message_id)">
            <p class="btnText">{{nextNotice.title}}</p><span class="el-icon-arrow-right"></span></div>
        </div>
      </div>
      <div class="closeBtn" @click="close">
        <span class="el-icon-close"></span>
      </div>
    </div>`
  </div>
</template>

<script>
	import {mapGetters} from "vuex";

	export default {
		name: "index",
		props: {
			isShowPage: {
				type: Boolean,
				default: () => false
			},
			message_id: {
				type: Number,
				default: () => 0
			},
			is_record: {
				type: Number,
				default: () => 0
			},
		},
		data() {
			return {
				index: 0,
				notification: [],
				currentNotice: null,
				lastNotice: null,
				nextNotice: null,
				isShow: false,
				loading: false
			};
		},
		computed: {
			...mapGetters(['user_type', 'showNotice']),
		},
		watch: {
			message_id: {
				handler(message_id) {
					if (message_id && message_id != 0) {
						this.getMessageDetail(message_id);
					}
				},
				deep: true
			}
		},
		components: {},
		methods: {
			close() {
				this.currentNotice = null;
				if (this.isShowPage) {
					this.$store.commit("changeState", {
						showNotice: 0
					});
				} else {
					this.$emit('close');
				}
			},
			getMessageDetail(message_id) {
				let postUrl = '';
				if (this.user_type == 1) {
					postUrl = this.$api.g_getMessageInfo
				}
				if (this.user_type == 2) {
					postUrl = this.$api.s_getMessageInfo
				}
				if (this.user_type == 4) {
					postUrl = this.$api.c_getMessageInfo
				}
				this.loading = true;
				this.$axios.post(postUrl, {
					message_id: message_id,
					is_record: this.is_record
				}).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						if (data.info) {
							this.currentNotice = data.info;
						}
						if (this.isShowPage) {
							this.lastNotice = data.last_info;
							this.nextNotice = data.next_info;
						}
						this.$getMessageConfig();

						if (!this.message_id) {
							this.$store.commit("changeState", {
								showNotice: 0
							});
						}
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.loading = false;
					this.$message.error(ret.msg || "服务繁忙，请稍后再试");
				});
			},
		},
		mounted() {
			if (this.showNotice) {
				this.getMessageDetail(this.message_id);
			}
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/common/notificationPanel/index.less"></style>
